<template>
    <el-col :span="24">
        <el-card shadow="always" header="逻辑站零流量清单">
            <el-form :model="queryParams" :inline="true" label-width="120px">
                <el-form-item label="所属区县：" prop="areaName">
                    <el-select v-model="queryParams.areaName" placeholder="请选择所属区县" clearable style="width: 240px">
                        <el-option v-for="dict in nhp_county_type" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="网络制式：" prop="networkType">
                    <el-select v-model="queryParams.networkType" placeholder="请选择网络制式" clearable style="width: 240px">
                        <el-option v-for="item in networkTypeOptions" :key="item.value" :label="item.key"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="站号" prop="gnodebId">
                    <el-input v-if="tableStatus == '4G'" v-model="queryParams.enbId" placeholder="请输入站号" clearable
                        style="width: 240px" />
                    <el-input v-else v-model="queryParams.gnodebId" placeholder="请输入站号" clearable
                        style="width: 240px" />
                </el-form-item>
                <el-form-item label="创建时间：" prop="createTime">
                    <el-date-picker v-model="queryParams.createStartEnd" type="daterange" start-placeholder="开始时间"
                        end-placeholder="结束时间" :size="size" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="listLogicData">查询</el-button>
                    <el-button @click="unsetQueryForm"><el-icon>
                            <RefreshRight />
                        </el-icon>重置</el-button>
                </el-form-item>
            </el-form>
            <el-row style="margin-bottom: 10px;">
                <el-button type="primary" icon="Download" @click="exportData">导出</el-button>
            </el-row>
            <el-table :data="exitTableData" style="width: 100%" @sort-change="sortChange" v-loading="loading">
                <el-table-column v-if="tableStatus == '4G'" prop="enbId" label="站号" width="90" align="center" />
                <el-table-column v-else prop="gnodebId" label="站号" width="auto" align="center" />
                <el-table-column prop="networkType" label="网络制式" width="auto" align="center" />
                <el-table-column prop="areaName" label="区县" width="auto" align="center" />
                <!-- <el-table-column prop="xxx" label="零流量持续天数" width="auto" align="center" /> -->
                <!-- <el-table-column prop="xxx" label="当月出现天数" width="auto" align="center" /> -->
                <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter" width="auto"
                    align="center" />
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="currentPage" v-model:limit="pageSize"
                @pagination="listLogicData" :autoScroll="true" />
        </el-card>

        <export-dialog ref="refExportDialog" @directExport="directExportData" />
    </el-col>
</template>

<script setup>
const { proxy } = getCurrentInstance();
import { getToken } from '@/utils/auth'
import { queryLogic4GList, queryLogic5GList } from '@/api/biz/maintenance';
import { useConfigStore } from '@/store/modules/config.js'

const { nhp_county_type } = proxy.useDict("nhp_county_type");

var currentDate = new Date();
currentDate.setDate(currentDate.getDate() - 7);
const queryParams = ref({
    networkType: '4G',
    // createStartEnd: [currentDate, new Date()]
})
const importDialogVisible = ref(false)
const exitTableData = ref([])
let tableStatus = ref(queryParams.value.networkType)

const networkTypeOptions = [
    {
        key: "4G",
        value: "4G"
    },
    {
        key: "5G",
        value: "5G"
    }
]
const currentPage = ref(1)
const refExportDialog = ref(null)
const pageSize = ref(10)
const total = ref(0)
const nowSortContent = ref();
const nowOrder = ref();
const configStoreData = useConfigStore()
let securityFlagConfig = configStoreData.configList.filter(item => item.configKey === 'sys.securityFlag')[0]

let loading = ref(false)

const getDateRange = () => {
    // console.log(new Date().toLocaleDateString())

    const startDay = 20
    let tempDateRange = []
    let currentDate = new Date();
    let year = currentDate.getFullYear();
    let month = currentDate.getMonth() + 1
    let day = currentDate.getDate()
    // let dayRes = day <= startDay ? day + 1 : startDay
    let dayRes = day + 1
    let newStartDay = startDay + 1

    /**
     * 上个月21日 - 当前月份20
     * 换成自然月
     */
    /* if (month == 1) {
        tempDateRange = [`${year - 1}-12-${newStartDay}`, `${year}-${month}-${dayRes}`]
    } else {
        tempDateRange = [`${year}-${month - 1}-${newStartDay}`, `${year}-${month}-${dayRes}`]
    } */
    tempDateRange = [`${year}-${month}-1`, `${year}-${month}-${dayRes}`]

    // console.log(tempDateRange)
    queryParams.value.createStartEnd = [new Date(tempDateRange[0]), new Date(tempDateRange[1])]
}
getDateRange()

function sortChange(column, prop, order) {
    nowOrder.value = column.order;
    nowSortContent.value = column.prop;
    listLogicData();
}

const unsetQueryForm = () => {
    queryParams.value = {
    }
    getDateRange()
    listLogicData()
}

function importFile() {
    importDialogVisible.value = true
}

function listLogicData() {
    let param = {
        pageSize: pageSize.value,
        pageNum: currentPage.value,
        ...queryParams.value
    }

    if (queryParams.value.createStartEnd && queryParams.value.createStartEnd.length > 0) {
        param.createStart = queryParams.value.createStartEnd[0].toLocaleDateString()
        param.createEnd = queryParams.value.createStartEnd[1].toLocaleDateString()
        delete param.createStartEnd
    }
    delete param.networkType

    const getAsyncData = (api) => {
        console.log(param, queryParams.value)

        api(param).then(res => {
            loading.value = false
            total.value = res.total
            exitTableData.value = res.rows

            tableStatus.value = queryParams.value.networkType
        })
    }

    loading.value = true

    switch (queryParams.value.networkType) {
        case '4G':
            delete param.gnodebId
            getAsyncData(queryLogic4GList)
            break;
        case '5G':
            delete param.enbId
            param.gnodebId = Number(param.gnodebId) ? Number(param.gnodebId) : undefined
            getAsyncData(queryLogic5GList)
    }
}

function networkTypeFormatter(row, column, cellValue, index) {
    if (!cellValue) { return }
    if (cellValue == '103') {
        return '4G';
    } else if (cellValue == '108') {
        return '5G';
    } else if (cellValue == '101') {
        return '2G';
    }
}

function dateFormatter(row, column, cellValue, index) {
    if (!cellValue) { return }
    // 创建一个新的 Date 对象
    var originalDate = new Date(cellValue);

    // 获取年、月、日、时、分、秒
    var year = originalDate.getFullYear();
    var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
    var day = ("0" + originalDate.getDate()).slice(-2);
    var hours = ("0" + originalDate.getHours()).slice(-2);
    var minutes = ("0" + originalDate.getMinutes()).slice(-2);
    var seconds = ("0" + originalDate.getSeconds()).slice(-2);

    // 格式化输出
    var formattedDateTimeString = year + "-" + month + "-" + day;
    // var formattedDateTimeString = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
    return formattedDateTimeString;
}

const download = (param) => {
    proxy.download("/maintenance/exportLogicList", {
        ...param
    }, `逻辑站零流量清单_${new Date().getTime()}.xlsx`);
}

// 导出明面上的数据
function exportData() {
    let param = {
        pageSize: pageSize.value,
        pageNum: currentPage.value,
        ...queryParams.value
    }

    if (queryParams.value.createStartEnd && queryParams.value.createStartEnd.length > 0) {
        param.createStart = queryParams.value.createStartEnd[0].toLocaleDateString()
        param.createEnd = queryParams.value.createStartEnd[1].toLocaleDateString()
        delete param.createStartEnd
    }

    //首先判断金库模式开关是否开启
    if (securityFlagConfig.configValue == "true") {
        // refExportDialog.value.show(param)
    } else {
        //未开启
        download(param)
    }
}

function directExportData() {
    let param = {
        pageSize: pageSize.value,
        pageNum: currentPage.value,
        ...queryParams.value
    }

    if (queryParams.value.createStartEnd && queryParams.value.createStartEnd.length > 0) {
        param.createStart = queryParams.value.createStartEnd[0].toLocaleDateString()
        param.createEnd = queryParams.value.createStartEnd[1].toLocaleDateString()
        delete param.createStartEnd
    }

    download(param)
}

listLogicData()
</script>